<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title></title>
   <meta name="viewport"
      content="width=device-width,maximum-scale=1.0,minimum-sacle=1.0,initial-scale=1.0,user-scalable=no">
   <meta http-equiv="X-UA-Compatiable" content="IE=Edge,chrome=1.0">
   <meta name="format-detection" content="telephone=no,email=no,adress=no">
   
   <script src="js/flexible.js"></script>
   <style>
      * {
         margin: 0;
         padding: 0;
         list-style: none;
         text-decoration: none;
      }

      html {
         height: 100%;
         width: 100%;
         font-size: 62.5%;
      }

      body {
         height: 100%;
         width: 100%;
         font-size: 1.6rem;
      }

      .warp {
         height: 100%;
         width: 100%;
         display: flex;
         display: -webkit-flex;
         font-size: 1.6rem;
         flex-direction: column;
      }

      .header {
         width: 100%;
         height: 1.333333rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         background-color: #e54847;
      }

      .header div {
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: .48rem;
         color: #fff;
         display: inline-block;
      }

      .header div:nth-of-type(3) {
         margin-right: .4rem;
      }

      .header div img {
         width: .426667rem;
         height: .426667rem;
      }

      .con {
         height: 1000px;
         flex: 1;

      }

      .con::-webkit-scrollbar {
         display: none;
      }

      .con_list {
         width: 100%;
         height: 3.04rem;
         border-bottom: .026667rem solid #777;
         display: flex;
         justify-content: space-between;
      }

      .con_list_a {
         margin-left: .266667rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
      }

      .con_list_a img {
         width: 1.706667rem;
         height: 2.4rem;
      }

      .con_list_c {
         margin-left: .266667rem;
         display: flex;
         justify-content: space-around;
         align-items: center;
         margin-right: .266667rem;
      }

      .con_list_c div {
         width: 1.253333rem;
         height: .72rem;
         color: #fff;
         border-radius: 5px;
         line-height: .72rem;
         text-align: center;
         font-size: .32rem;
      }

      .con_list_c .gpbtn {
         background: #f03d37;
      }

      .con_list_c .ysbtn {
         background: #3c9fe6;
      }

      .p1 {
         margin-top: 5%;
         font-size: .453333rem;
         color: #333;
         font-weight: bold;
         width: 5.333333rem;
      }


      .p2 span {
         font-size: .426667rem;
         color: #faaf00;
         display: inline-block;
      }

      .p2,
      .p3,
      .p4 {
         font-size: .373333rem;
         color: #777;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         margin-top: 2%;
         width: 5.333333rem;
      }


      .footer {
         height: 1.333333rem;
         width: 100%;
         display: flex;
         align-items: center;
         border-top: .026667rem solid #a8a9aa;
      }

      .footer p {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: .373333rem;
      }

      .footer p img {
         width: .72rem;
         height: .72rem;
      }
   </style>
 
</head>

<body>
   <div class="warp" id="app">
      <myheader></myheader>
      <mycon :list="list"></mycon>
      <myfooter></myfooter>
   </div>
   <script src="js/vue.js"></script>
   <script src="js/axios.js"></script>
   <script>
      // 头部
      var myheader = {
         template: `<div class="header">
            <div></div>
             <div>猫眼电影</div>
             <div><img src="./1.png" alt=""></div>
      </div>`
      }

      //创建孙子组件  item
      var item = {
         props: ["item"],
         template: `
         <div class="con_list">
            <div class="con_list_a">
               <img :src="item.img" />
            </div>
         <div class="con_list_b">
            <p class="p1">{{item.nm}}</p>
            <p class="p2">评分 <span>{{item.sc}}</span></p>
            <p class="p3">主演：{{item.star}}</p>
            <p class="p4">{{item.showInfo}}</p>
         </div>
         <div></div>
         <div></div>
         <div class="con_list_c">
            <div v-if="item.preShow" class="btn ysbtn">预售</div>
            <div v-else class="btn gpbtn">购票</div>
         </div>
        </div>`
      }

      // 中间
      var mycon = {
         props: ["list"],
         template: `<div class="con">
            <item v-for="item in list" :item="item" :key="item.id" ></item>
            </div>
      `,
         components: {
            item
         }
      }

      // 尾部
      var myfooter = {
         template: `  <div class="footer">
         <p>
            <a href="#">电影/影院</a>
         </p>
         <p>
            <a href="#">视频</a>
         </p>
         <p>
            <a href="#">小视频</a>
            <p>
               <a href="#">演出</a>
            </p>
            <p>
               <a href="#"> 我的</a>
            </p>
      </div>`
      }
      var app = new Vue({
         el: "#app",
         data: {
            list: [],
         },
         mounted() {
            axios.get("./list.json").then(res => {
               this.list = res.data;
               this.list.forEach(item => {
                  item.img = item.img.replace("w.h", "64.90");
               })
            })
         },
         components: {
            myheader,
            mycon,
            myfooter
         }
      })
   </script>
   </script>
</body>

</html>